<template>
	<view class="add-field">
		<view style="display: flex; justify-content: space-between; align-items: center; margin-top: 20rpx;">
			
			<view>
				<view style="color: #f00;font-size: 26rpx;">*报名表单已有姓名，电话字段</view>
				<view>附加报名表单字段：</view>
			</view>
			
			<!-- <text>附加报名表单：</text> -->
			<view><text @tap="openfrom(0, 'center')" class="add-text">+添加字段</text>
			<text class="add-text" style="margin-left: 20rpx;" v-show="this.page_from.length != 0" @click="onClickEdit">{{delShow ? '退出' : '编辑'}}</text>
			</view>
		</view>

		<scroll-view scroll-y style="max-height: 650rpx;">
			<view class="table-title">
				<text class="table-text1">文字提示</text>
				<text class="table-text2">字段名称</text>
				<text class="table-text2">字段类型</text>
				<text class="table-text2">是否必填</text>
			</view>

			<view class="from-data">
				<view v-for="(item, index) in page_from" :key="index">
					<view class="data-box">
						<text class="data-text1">{{item.toast}}</text>
						<text class="data-text1">{{item.name}}</text>
						<text class="data-text1">{{item.type.value}}</text>
						<view class="data-text2" style="position: relative; align-items: center; display: flex; flex-direction: column;">
							<text>{{item.necessary ? '是' : '否'}}</text>
							<image src="../../static/del.png" style="position: absolute;right: 0; top: 10rpx; width: 50rpx; height: 50rpx; border-radius: 50%;" v-show="delShow" @click="delfromline(index)"></image>
						</view>
					</view>
					<view v-show="item.radioitem.length != 0">
						<view v-for="(item1, index1) in item.radioitem" :key="index1">
							<view style="display: flex; justify-content: space-around; border-bottom: 2rpx solid #000;">
								<view style=""><text style="color: #999;">选项名：</text>{{item1.key}}</view>
								<view><text style="color: #999;">选项值：</text>{{item1.value}}</view>
							</view>
						</view>
					</view>
					
					<view v-show="item.checkboxitem.length != 0">
						<view v-for="(item1, index1) in item.checkboxitem" :key="index1">
							<view style="display: flex; justify-content: space-around; border-bottom: 2rpx solid #000;">
								<view style=""><text style="color: #999;">选项名：</text>{{item1.key}}</view>
								<view><text style="color: #999;">选项值：</text>{{item1.value}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<openAlert :BgColor="BgColor" closeBtn ref="openAlertFrom" :AlertClass="AlertClass" :AlertPosition="AlertPosition"
		 :shadeClose="false">
			<view class="open-box">
				<view class="title">添加字段</view>

				<view class="toast">
					<text class="text">文字提示：</text>
					<input class="input" v-model="open_addfield.toast" placeholder="请输入文字提示" />
				</view>

				<view class="toast">
					<text class="text">字段名称：</text>
					<input class="input" v-model="open_addfield.name" @blur="blur" placeholder="请输入字段名称" />
				</view>

				<view class="toast">
					<text class="text">字段类型：</text>
					<xfl-select :list="selectList" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false" ref="xflselect" :style_Container="'height: 35px; font-size: 16px; width: 100%'" :placeholder="'请选择'" :selectHideType="'hideAll'"
					 @change="onclickSelect">
					</xfl-select>
				</view>

				<view class="necessary">
					<text class="text">是否必填：</text>
					<checkbox-group @change="checkbox" style="">
						<checkbox value="true" color="#475dfc" style="transform:scale(0.9); width: 50rpx;" />
					</checkbox-group>
				</view>
				
				<view v-show="radioShow" >
					<view style="display: flex; justify-content: space-between;">
						<text>单项选择器选项：</text>
						<view>
							<text @tap="openSelector(0, 'center')" style="background-color: #475dfc; padding: 4rpx 10rpx; color: #fff; border-radius: 10rpx;">添加选项</text>
							<text @click="editradio" v-show="this.open_addfield.radioitem.length != 0" style="background-color: #475dfc; padding: 4rpx 10rpx; color: #fff; border-radius: 10rpx; margin-left: 20rpx;">编辑</text>
						</view>
					</view>
					
					<view v-show="this.open_addfield.radioitem.length != 0" >
						<view v-for="(item, index) in this.open_addfield.radioitem" :key="index">
							<view style="display: flex; justify-content: space-around; position: relative;">
								<view><text style="color: #999;">选项名：</text>{{item.key}}</view>
								<view><text style="color: #999;">选项值：</text>{{item.value}}</view>
								<image v-show="delradio" @click="delradiolist(index)" src="../../static/del.png" style="height: 50rpx; width: 50rpx; position: absolute; right: 0; top: 14rpx;"></image>
							</view>
						</view>
					</view>
				</view>
				
				<view v-show="checkboxShow">
					<view style="display: flex; justify-content: space-between;">
						<text>多项选择器选项：</text>
						<view>
							<text @tap="openCheckbox(0, 'center')" style="background-color: #475dfc; padding: 4rpx 10rpx; color: #fff; border-radius: 10rpx;">添加选项</text>
							<text @click="delcheckboxlist" v-show="this.open_addfield.checkboxitem.length != 0" style="background-color: #475dfc; padding: 4rpx 10rpx; color: #fff; border-radius: 10rpx; margin-left: 20rpx;">编辑</text>
						</view>
					</view>
					
					
					<view v-show="this.open_addfield.checkboxitem.length != 0" >
						<view v-for="(item, index) in this.open_addfield.checkboxitem" :key="index">
							<view style="display: flex; justify-content: space-around; position: relative;">
								<view><text style="color: #999;">选项名：</text>{{item.key}}</view>
								<view><text style="color: #999;">选项值：</text>{{item.value}}</view>
								<image v-show="delradio" @click="delradiolist(index)" src="../../static/del.png" style="height: 50rpx; width: 50rpx; position: absolute; right: 0; top: 14rpx;"></image>
							</view>
						</view>
					</view>
				</view>
				
				<openAlert :BgColor="BgColor" closeBtn ref="openAlertSelector" :AlertClass="AlertClass" :AlertPosition="AlertPosition"
				 :shadeClose="false">
					<view style="background-color: #fff; width: 650rpx; border-radius: 10rpx; padding: 30rpx;">
						<view style="text-align: center;font-size: 34rpx;">添加选项</view>
						<view style="display: flex; align-items: center; width: 650rpx;">
							<text style="main-width: 150rpx;">选项名：</text><input placeholder="请输入选项名" v-model="selector_list.key" style="width: 500rpx; background-color: #eee;height: 60rpx; border-radius: 6rpx; padding: 0 10rpx;"/>
						</view>
						<view style="display: flex; align-items: center;">
							<text style="main-width: 150rpx;">选项值：</text><input placeholder="请输入选项值" v-model="selector_list.value" style="width: 500rpx; background-color: #eee;height: 60rpx; border-radius: 6rpx; padding: 0 10rpx;"/>
						</view>
						
						<button @click="onclickSelector" style="margin-top: 30rpx;">完成</button>
					</view>
				</openAlert>
				
				<openAlert :BgColor="BgColor" closeBtn ref="openAlertCheckbox" :AlertClass="AlertClass" :AlertPosition="AlertPosition"
				 :shadeClose="false">
					<view style="background-color: #fff; width: 650rpx; border-radius: 10rpx; padding: 30rpx;">
						<view style="text-align: center;font-size: 34rpx;">添加选项</view>
						<view style="display: flex; align-items: center; width: 650rpx;">
							<text style="main-width: 150rpx;">选项名：</text><input placeholder="请输入选项名" v-model="selector_list.key" style="width: 500rpx; background-color: #eee;height: 60rpx; border-radius: 6rpx; padding: 0 10rpx;"/>
						</view>
						<view style="display: flex; align-items: center;">
							<text style="main-width: 150rpx;">选项值：</text><input placeholder="请输入选项值" v-model="selector_list.value" style="width: 500rpx; background-color: #eee;height: 60rpx; border-radius: 6rpx; padding: 0 10rpx;"/>
						</view>
						
						<button @click="onclickCheckbox" style="margin-top: 30rpx;">完成</button>
					</view>
				</openAlert>

				<button @click="onClickComplete" class="but">完成</button>

			</view>
		</openAlert>

	</view>
</template>

<script>
	import openAlert from '../../components/open-alert/open-alert.vue'
	import xflSelect from '../../components/xfl-select/xfl-select.vue'
	export default {
		name: 'diyfrompage',
		comments: {
			openAlert,
			xflSelect: xflSelect,
		},
		props: {
			extra_field_config: null,
		},
		data() {
			return {
				checked_value: false,
				BgColor: 'rgba(0,0,0,0.5)',
				AlertClass: 0,
				AlertPosition: '',
				selectList: [{
					value: '输入框',
					key: 'string'
				}, {
					value: '多行输入框',
					key: 'textarea'
				}, {
					value: '单张图片',
					key: 'oneimg'
				}, {
					value: '多张图片',
					key: 'manyimg'
				}],
				// selectList: [{
				// 	value: '输入框',
				// 	key: 'string'
				// }, {
				// 	value: '多行输入框',
				// 	key: 'textarea'
				// }, {
				// 	value: '单张图片',
				// 	key: 'oneimg'
				// }, {
				// 	value: '多张图片',
				// 	key: 'manyimg'
				// }, {
				// 	value: '单项选择器',
				// 	key: 'radio'
				// }, {
				// 	value: '多项选择器',
				// 	key: 'checkbox',
				// }],
				open_addfield: {
					toast: '',
					name: '',
					type: [],
					necessary: '',
					checkboxitem: [],
					radioitem: [],
				},
				page_from: [],
				delShow: false,
				join_list: [],
				repeat: false,
				checkboxShow: false,
				radioShow: false,
				selector_list:{
					key: '',
					value: '',
				},
				delradio: false
			}
		},
		methods: {
			onclickCheckbox() {
				if (this.selector_list.key == '') {
					uni.showToast({
						title: '选项名不能为空',
						icon: 'none'
					})
					return
				}
				if (this.selector_list.value == '') {
					uni.showToast({
						title: '选项值不能为空',
						icon: 'none'
					})
					return
				} 
				// if (this.repeat == true) {
				// 	uni.showToast({
				// 		title: '字符名称不能重复',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// this.open_addfield.radioitem = this.selector_list
				this.open_addfield.checkboxitem.push(this.selector_list)
				// console.log(this.selector_list,this.open_addfield.radioitem,99)
				// console.log(this.open_addfield,99999)
				this.selector_list = {
					key: '',
					value: ''
				},
				this.$refs.openAlertCheckbox.Close();
			},
			
			onclickSelector() {
				if (this.selector_list.key == '') {
					uni.showToast({
						title: '选项名不能为空',
						icon: 'none'
					})
					return
				}
				if (this.selector_list.value == '') {
					uni.showToast({
						title: '选项值不能为空',
						icon: 'none'
					})
					return
				} 
				// if (this.repeat == true) {
				// 	uni.showToast({
				// 		title: '字符名称不能重复',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// this.open_addfield.radioitem = this.selector_list
				this.open_addfield.radioitem.push(this.selector_list)
				// console.log(this.selector_list,this.open_addfield.radioitem,99)
				// console.log(this.open_addfield,99999)
				this.selector_list = {
					key: '',
					value: ''
				},
				this.$refs.openAlertSelector.Close();
			},
			
			blur: function(event) {
				this.repeat = false
				// console.log(event.target.value)
				for (let i = 0; i < this.join_list.length; i++) {
					if (event.target.value == this.join_list[i]) {
						uni.showToast({
							title: '字段名称存在重复',
							icon: 'none'
						})
						this.repeat = true
						return
					}
				}
			},
			
			delfromline(index){
				// console.log(this.page_from[index].name)
				// uni.showModal({
				// 	title: '删除字段',
				// 	content: '是否确定删除' + this.page_from[index].name + '字段',
				// 	success: function (res) {
				// 		console.log('qqqq')
				// 		if (res.confirm == true) {
				// 			console.log('xxxxx')
				// 			this.page_from.splice(index, 1)
				// 		} else if (res.cancel) {
							
				// 		}
				// 	}
				// })
				this.page_from.splice(index, 1)
			},
			
			onClickEdit() {
				this.delShow = !this.delShow
			},
			
			editradio() {
				this.delradio = !this.delradio
			},
			
			delradiolist(index) {
				this.open_addfield.radioitem.splice(index, 1)
			},
			
			delcheckboxlist(index) {
				this.open_addfield.checkboxitem.splice(index, 1)
			},
			
			onClickComplete() {
				if (this.open_addfield.toast == '') {
					uni.showToast({
						title: '文字提示不能为空',
						icon: 'none'
					})
					return
				}
				if (this.open_addfield.name == '') {
					uni.showToast({
						title: '字段名称不能为空',
						icon: 'none'
					})
					return
				} else {
					let text = /^[a-zA-Z_]+$/;
					if (!text.test(this.open_addfield.name)) {
						uni.showToast({
							title: '字段名称只能为英文和下划线',
							icon: 'none'
						});
						return
					}
				}
				if (this.repeat == true) {
					uni.showToast({
						title: '字段名称不能重复',
						icon: 'none'
					})
					return
				}
				if (this.open_addfield.type == '') {
					uni.showToast({
						title: '字段类型不能为空',
						icon: 'none'
					})
					return
				}
				this.open_addfield.necessary = this.checked_value
				this.page_from.push(this.open_addfield)
				// this.page_from.push(this.open_addfield)
				this.open_addfield = {
					toast: '',
					name: '',
					type: [],
					necessary: '',
					radioitem: [],
					checkboxitem: []
				},
				// console.log(this.page_from, 'page_from', this.open_addfield)
				this.$refs.xflselect.onClear()
				this.$emit('onclickdiyfrom',this.page_from)
				this.$refs.openAlertFrom.Close();
			},

			checkbox() {
				// console.log(this.checked_value)
				this.checked_value = !this.checked_value
			},

			onclickSelect(e) {
				this.open_addfield.type = e.orignItem
				if (e.orignItem.key == 'radio') {
					this.radioShow = true
					this.checkboxShow = false
					this.selector_list = {
						key: '',
						value: ''
					}
				} else if (e.orignItem.key == 'checkbox') {
					this.checkboxShow = true
					this.radioShow = false
					this.selector_list = {
						key: '',
						value: ''
					}
				} else {
					this.checkboxShow = false
					this.radioShow = false
					this.selector_list = {
						key: '',
						value: ''
					}
				}
				// console.log(e,this.open_addfield)
			},

			openfrom(Class, Position) {
				this.radioShow = false
				this.checkboxShow = false
				this.selector_list = {
					key: '',
					value: ''
				}
				this.join_list = []
				for (let i = 0; i < this.extra_field_config.length; i++) {
					this.join_list.push(this.extra_field_config[i].name)
				}
				// console.log(this.join_list)
				this.$nextTick(function() {
					this.AlertClass = Class;
					this.AlertPosition = Position;
					this.$nextTick(function() {
						this.$refs.openAlertFrom.Show();
					});
				});
			},
			
			openSelector(Class, Position) {
				this.selector_list = {
					key: '',
					value: ''
				},
				this.$nextTick(function() {
					this.AlertClass = Class;
					this.AlertPosition = Position;
					this.$nextTick(function() {
						this.$refs.openAlertSelector.Show();
					});
				});
			},
			
			openCheckbox(Class, Position) {
				this.selector_list = {
					key: '',
					value: ''
				},
				this.$nextTick(function() {
					this.AlertClass = Class;
					this.AlertPosition = Position;
					this.$nextTick(function() {
						this.$refs.openAlertCheckbox.Show();
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	// @import '@/components/colorui/main.css';

	page {
		padding-top: -50rpx;
	}

	.add-field {
		font-size: 30rpx;
		// padding: 30rpx;

		.add-text {
			background-color: #475dfc;
			padding: 10rpx;
			border-radius: 10rpx;
			color: #fff;
		}

		.table-title {
			display: flex;
			justify-content: space-around;
			margin-top: 20rpx;
			line-height: 70rpx;
			background-color: #eee;

			.table-text1 {
				width: 25%;
				text-align: center;
				border: 2rpx solid #000;
			}

			.table-text2 {
				width: 25%;
				text-align: center;
				border: 2rpx solid #000;
				border-left: none;
			}
		}

		.from-data {
			border-left: 2rpx solid #000;
			border-right: 2rpx solid #000;
			line-height: 70rpx;

			.data-box {
				display: flex;
				justify-content: space-around;

				.data-text1 {
					word-break:break-all;
					width: 25%;
					text-align: center;
					border-right: 2rpx solid #000;
					border-bottom: 2rpx solid #000;
				}

				.data-text2 {
					width: 25%;
					text-align: center;
					border-bottom: 2rpx solid #000;
				}
			}
		}

		.open-box {
			background-color: #fff;
			padding: 30rpx;
			width: 650rpx;
			line-height: 80rpx;
			border-radius: 10rpx;

			.title {
				font-size: 34rpx;
				text-align: center;
				font-weight: bold;
			}

			.toast {
				display: flex;
				align-items: center;
				width: 650rpx;

				.text {
					min-width: 150rpx;
				}

				.input {
					background-color: #eee;
					width: 100%;
					border-radius: 10rpx;
					height: 60rpx;
					padding: 0 10rpx;
				}
			}

			.necessary {
				display: flex;
				justify-content: space-between;
			}
			
			.but {
				background-color: #475dfc;
				margin-top: 20rpx; 
				color: #fff;
			}

		}
	}
</style>
